<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>酒店查询</title>
    <script src="__PUBLIC__/echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.2.6.4.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<style>
    .roomAndPersonShade{float: left;width:100%;font-size: 16px;text-align: center;}
    .marginBtm20{margin-bottom: 20px;}
    .padding6{padding:6px;}
    .personName{}
    .roomTitle{font-weight: bold;font-size: 18px;}
    .personAge{font-size: 12px;color: #aaa;}
    .caculateNum{line-height: 18px;text-align:center;}
    .caculateNumDec{border: 1px solid #b2b2b2;width:20px;border-radius: 50%;background: #b2b2b2;color: #fff;}
    .caculateNumNum{width: 20px;}
    .caculateNumInc{border: 1px solid #b2b2b2;width:20px;border-radius: 50%;color: #b2b2b2;}
    .addNewRoom,.delOldRoom{margin-right: 10px;float: right}
    .service_icon{margin-right: 10px;}
    #addressbox{z-index:161;top:70px;max-height:300px;background:#fff;text-align:left;overflow: auto;text-overflow: ellipsis;}
    .filterDiv{margin: 10px 30px;padding-bottom:10px;line-height: 50px;border-bottom: 1px solid #ddd;transition: max-height 2s;}
    #starsLevel,#commentScore{margin-top: 22px;width:70%;margin-left: 8px;}
    .layui-slider-wrap{top:-24px;}
</style>
<body>
<div id="selectRoomAndPersonTemplate" style="display: none;">
<div class="layui-form roomAndPersonShade">
    <div class="row roomList">
        <div class="layui-col-md12 marginBtm20" >
            <div class="layui-row padding6">
                <div class="layui-col-md6 roomTitle">房间<span class="roomNo">1</span>
                </div>
            </div>
            <div class="layui-row padding6 person">
                <div class="layui-col-md6 personName">成人<br><span class="personAge">18岁及以上</span></div>
                <div class="layui-col-md6 caculateNum">
                    <a class="layui-inline caculateNumDec">－</a>
                    <div class="layui-inline caculateNumNum">1</div>
                    <a class="layui-inline caculateNumInc">＋</a>
                </div>
            </div>
            <div class="layui-row padding6 children">
                <div class="layui-col-md6 personName">儿童<br><span class="personAge">0-17岁</span></div>
                <div class="layui-col-md6 caculateNum">
                    <a class="layui-inline caculateNumDec">－</a>
                    <div class="layui-inline caculateNumNum">0</div>
                    <a class="layui-inline caculateNumInc">＋</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="layui-cll-md12">
            <a class="layui-btn layui-btn-normal addNewRoom" style="">添加房间</a>
            <a class="layui-btn layui-btn-danger delOldRoom" style="">删除房间</a>
        </div>
    </div>

</div>
</div>
<!--<fieldset class="layui-elem-field layui-field-title" style="width: 100%;margin-top: 50px;">-->
    <!--<legend>方框风格的表单集合</legend>-->
<!--</fieldset>-->
<form id="filterHotelForm" class="layui-layer-border layui-form" style="margin: 24px;">
    <input type="hidden" name="id" value="{$params.id}">
    <div class="layui-row" style="margin: 10px 30px;padding-bottom:10px;line-height: 50px; border-bottom: 1px solid #ddd">
        <div class="layui-col-md12" style="z-index:1;position: relative;line-height: 30px;">
            <div class="layui-inline">
                <span style="padding: 0 10px;">关键词检索</span>
                <div class="layui-btn layui-btn-primary" style="display: block">
                    <input type="text" class="" name="keywords" value="{$params.keywords|default=''}" style="border: none;" placeholder="请输入关键词">
                    <input type="hidden" name="regionId" value="{$params.regionId|default=''}">
                    <div id="addressbox"></div>
                    <!--<i class="layui-icon layui-icon-search" style="font-size: 30px;opacity: 0.5;margin-right:-8px;"></i>-->
                </div>
            </div>

            <div class="layui-inline checkIn_div">
                <span style="padding: 0 10px;">入住时间</span>
                <input type="text" class="layui-input layui-inline" id="checkIn" name="checkIn" value="{$params.checkIn|default=''}" placeholder="入住时间">
            </div>
            <div class="layui-inline checkOut_div">
                <span style="padding: 0 10px;">退房时间</span>
                <input type="text" class="layui-input layui-inline" id="checkOut" name="checkOut" value="{$params.checkOut|default=''}" placeholder="退房时间">
            </div>

            <div class="layui-inline" style="width:20%;">
                <span style="padding: 0 10px;">房间，人数</span>
                <input type="text" class="layui-input" id="selectRoomAndPerson" name="roomAndPerson" placeholder="请选择房间和入住人数" readonly>
                <input type="hidden" name="occupancy" value='{$params["occupancy"]|default=""}'>
            </div>
            <div class="layui-inline" style="margin-left: 20px;">
                <span style="padding: 0 10px;"></span>
                <div class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="filterHotel" style="display: block">
                    <i class="layui-icon layui-icon-search" style="font-size: 30px;opacity: 0.5;"></i>
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 20px;">
                <span style="padding: 0 10px;"></span>
                <div class="layui-btn layui-btn-danger layui-btn-radius" lay-submit="" lay-filter="clearFilterHotel" style="display: block">
                    重置
                </div>
            </div>
        </div>
    </div>
    {notempty name="$list['filters']"}{volist name="list['filters']" id="filter_value"}{if is_array($filter_value) && $index=$key}
    <div class="layui-row filterDiv" style="max-height: 50px;overflow: hidden">
        <div class="layui-col-md1">
            {if $key=='categories'}分类
            {elseif $key=='themes'}主题
            {elseif $key=='amenities'}便利设施
            {elseif $key=='barrierFreeFacilities'}无障碍设置
            {/if}
        </div>
        <div class="layui-col-md10">
            <div class="layui-row">
                <div class="layui-col-md112">
                    <div class="layui-inline" style="padding: 0 10px;">
                        {notempty name="$filter_value"}{volist name="filter_value" id="filter_value_v" key="filter_value_k"}{if !empty($filter_value_v['eId'])&&$filter_value_v['id']=$filter_value_v['eId']}{/if}
                        <!--<input type="radio" name="price" title="不限" lay-skin="primary">-->
                        <input type="checkbox" {if !empty($_GET[$index][$filter_value_v.id])}checked{/if} name="{$index}[{$filter_value_v.id}]" title="{$filter_value_v.nameZh|default=$filter_value_v.name}" lay-skin="primary">
                        {/volist}{/notempty}
                    </div>
                </div>
                <!--<div class="layui-col-md3">-->
                <!--<span style="margin: 0 10px">自定义</span>-->
                <!--<input type="text" placeholder="￥" class="layui-input layui-input-inline" style="width: 80px;">-->
                <!--<span style="margin: 0 4px">-</span>-->
                <!--<input type="text" placeholder="￥" class="layui-input layui-input-inline" style="width: 80px;">-->
                <!--</div>-->
            </div>
        </div>
        <div class="layui-col-md1 seeMoreFilter" data-rotate="0">
            <div class="layui-inline">更多</div>
            <div class="layui-inline seeMoreFilterIcon"><i class="layui-icon-triangle-d layui-icon"></i></div>
        </div>
    </div>
    {/if}{/volist}{/notempty}
    <div class="layui-row" style="margin: 10px 30px;padding-bottom:10px;line-height: 50px;border-bottom: 1px solid #ddd">
        <div class="layui-col-md1">星级（1-5）</div>
        <div class="layui-col-md4">
            <div class="layui-row">
                <div id="starsLevel" class="demo-slider"></div>
                <input type="hidden" name="ratingMin" value="{$_GET['ratingMin']|default=0}">
                <input type="hidden" name="ratingMax" value="{$_GET['ratingMax']|default=5}">
            </div>
        </div>
        <div class="layui-col-md1">评分（1-5）</div>
        <div class="layui-col-md4">
            <div class="layui-row">
                <div id="commentScore" class="demo-slider"></div>
                <input type="hidden" name="ratingGuestMin" value="{$_GET['ratingGuestMin']|default=0}">
                <input type="hidden" name="ratingGuestMax" value="{$_GET['ratingGuestMax']|default=5}">
            </div>
        </div>
        <div class="layui-col-md2">
            <select name="sortBy" id="sortBy" class="layui-select">
                <option value="">请选择排序</option>
                <option value="score" {if !empty($_GET['sortBy']) && $_GET['sortBy']=='score'}selected{/if}>评分(默认)</option>
                <option value="price" {if !empty($_GET['sortBy']) && $_GET['sortBy']=='price'}selected{/if}>价格</option>
            </select>
        </div>
    </div>
</form>

<div class="layui-layer-border layui-form" style="padding: 30px;margin:0 24px;">
    {empty name="$list['hotels']"}暂无数据{/empty}
    {notempty name="$list['hotels']"}
    {volist name="list.hotels" id="value"}
    <div class="layui-row" style="padding-bottom: 20px;">
        <div class="layui-col-md3">
            <div class="layui-carousel" style="text-align: center;" id="carousel_imgs{{$key}}">
                <div carousel-item="">
                    {volist name="value.images" id="image_value"}
                    {if $key < 5}
                    <div><img src="{$image_value.links.350px.href}"></div>
                    {/if}
                    {/volist}
                </div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div style="padding: 10px;">
                        <p style="font-size: 20px;font-weight: bold;">{$value.name|default=''}<span style="font-size: 16px;color: orange;text-align: center;margin-left: 20px;">{$value.ratings.property.rating|default=0}/5分</span></p>
                        <div class="layui-row">
                            <div class="layui-col-md6" style="font-size: 12px;line-height: 16px;">
                                {notempty name="$value['ratings']['property']['rating']"}
                                <p style="padding: 2px 0;">星级：
                                    {if $int_star=ceil($value['ratings']['property']['rating']) && $int_star_arr = array_fill(0,intval($value['ratings']['property']['rating']),'1')}{/if}
                                    {foreach name="int_star_arr" id="int_star_value"}
                                    <i class="layui-icon layui-icon-rate-solid"></i>
                                    {/foreach}
                                    {if preg_match("/^\d*\.\d*$/",$value['ratings']['property']['rating'])}
                                    <i class="layui-icon layui-icon-rate-half"></i>
                                    {/if}
                                </p>
                                {/notempty}
                                <p style="padding: 2px 0;">{notempty name="$value.statistics"}{volist name="value.statistics" id="static_v"}{$static_v.name|default=''} | {/volist}{/notempty}</p>
                                <p style="padding: 2px 0;color: #999;min-height:60px;">地址：{$value.descriptions.location|default='位置'}</p>
                                <p style="padding: 2px 0;color: #666;">最早入住时间：{$value.checkin.begin_time | default='待定'}</p>
                                <p style="padding: 2px 0;color: #666;">最晚退房时间：{$value.checkout.time | default='待定'}</p>
                                <!--<p style="font-size: 12px;padding: 2px 0;color: #ccc;line-height: 20px;">注意：{$value.policies.know_before_you_go | default=''}</p>-->
                                <p style="padding: 2px 0;color: #666;">联系方式：{$value.phone | default=''}</p>

                            </div>
                            <div class="layui-col-md6" style="max-height: 200px;overflow: hidden;">
                                <div class="layui-row" style="padding:0 32px;line-height: 20px;font-size: 12px;margin-top: 6px;">
                                    <div class="layui-col-md6">
                                    {notempty name="$value.amenities"}
                                    {volist name="value.amenities" id="amenity_value" key="key"}
                                    <div class="layui-row">
                                        <div class="layui-col-md10" data-id="{$key}">
                                            <i class="layui-icon layui-icon-ok service_icon"></i>{$amenity_value.name}
                                        </div>
                                    </div>
                                    {/volist}
                                    {/notempty}
                                    {empty name="$value.amenities"}
                                        <div class="layui-row" style="padding:6px 0;"></div>
                                     {/empty}
                                    </div>
                                    <div class="layui-col-md6" style="text-align: right;">
                                        {if $value['rooms'][0]['rates'][0]['available_rooms'] < 10 }<div class="layui-row"><span style="color:red">我们还剩{$value['rooms'][0]['rates'][0]['available_rooms']}间</span></div>{/if}
                                        <div class="layui-row" style="font-size: 24px;">{$value['rooms'][0]['rates'][0]['computedPrice']['averageBaseRate']|default=0} {$value['rooms'][0]['rates'][0]['computedPrice']['currency']|default=''}</div>
                                        <div class="layui-row">不含税费和服务费</div>
                                        <div class="layui-row">
                                            <button class="layui-btn layui-btn-radius layui-btn-warm goToDetails" data-id="{$value.eId}" style="background: orange;color: #fff;margin-left:10px;float: right;">详情</button>
                                        </div>
                                        {if $value['rooms'][0]['rates'][0]['refundable']}
                                        <div class="layui-row" style="color:green"><i class="layui-icon layui-icon-ok"></i>免费取消</div>
                                        {/if}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {/volist}
    {/notempty}
</div>
</body>
<script src="__PUBLIC__/layui/layui.2.5.6.all.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
</html>
<script type="text/javascript">
    layui.use(['layer','form','laydate','carousel','slider'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var carousel = layui.carousel;
        var slider = layui.slider;
        var today = formatDate();
        function formatDate(date) {
            var d = new Date(date),
                month = '' + (d.getMonth() + 1),
                day = '' + d.getDate(),
                year = d.getFullYear();

            if (month.length < 2) month = '0' + month;
            if (day.length < 2) day = '0' + day;

            return [year, month, day].join('-');
        }
        //星级评分
        var initRatingMin = parseInt("{$_GET['ratingMin']|default=0}");
        var initRatingMax = parseInt("{$_GET['ratingMax']|default=5}");
        //开启范围选择
        var initRatingGuestMin = parseInt("{$_GET['ratingGuestMin']|default=0}");
        var initRatingGuestMax = parseInt("{$_GET['ratingGuestMax']|default=5}");

        function renderSlider(elem,min,max,min_input_name,max_input_name)
        {
            slider.render({
                elem: '#'+elem
                ,value:[min,max]
                ,min: 0 //初始值
                ,max: 5 //初始值
                ,range: true //范围选择
                ,change: function(vals){
                    $('input[name='+min_input_name+']').val(vals[0]);
                    $('input[name='+max_input_name+']').val(vals[1]);
                }
            });
        }
        renderSlider('starsLevel',initRatingMin,initRatingMax,
            'ratingMin','ratingMax')
        renderSlider('commentScore',initRatingGuestMin,initRatingGuestMax,
            'ratingGuestMin','ratingGuestMax')

        //date 格式 new Date(xxx)
        function getTimestamp(date)
        {
            var time =  Date.parse( new Date(date) ).toString();//获取到毫秒的时间戳，精确到毫秒
            return parseInt(time.substr(0,10));
        }

        //重新渲染checkIn
        function renderLaydateCheckIn(max_date='',input_date='')
        {
            $("#checkIn").removeAttr('lay-key');
            var obj = {     //创建时间选择框
                elem: '#checkIn' //指定元素
                ,format: 'yyyy-MM-dd'
                ,value : input_date
                ,min : today
                ,trigger:'click'
                ,type:'date'
                ,done:function (value) {
                    //判断是否入住时间超过退房时间
                    var next_day_timestamp = getTimestamp(value) + 24*3600;
                    var show_date = formatDate(new Date(parseInt(next_day_timestamp) * 1000));
                    renderLaydateCheckOut(show_date,show_date)
                }
            }
            if(max_date!==''){
                var input = '<input type="text" class="layui-input layui-inline" id="checkIn" name="checkIn" placeholder="入住时间">';
                $('#checkIn').remove();
                $('.checkIn_div').append(input);
                obj.max = max_date;
            }
            laydate.render(obj);
        }
        //重新渲染checkOut
        function renderLaydateCheckOut(min_date='',input_date='')
        {
            var obj = {     //创建时间选择框
                elem: '#checkOut' //指定元素
                ,format: 'yyyy-MM-dd'
                ,value : input_date
                ,min : today
                ,trigger:'click'
                ,type:'date'
                ,done:function (value) {

                }
            }
            if(min_date!==''){
                var input = '<input type="text" class="layui-input layui-inline" id="checkOut" name="checkOut" placeholder="退房时间">';
                $('#checkOut').remove();
                $('.checkOut_div').append(input);
                obj.min = min_date;
            }
            laydate.render(obj);
        }
        renderLaydateCheckIn()
        renderLaydateCheckOut()
        $(document).ready(function () {
            //图片轮播
            $(".layui-carousel").each(function () {
                carousel.render({
                    elem: this
                    ,width: '100%'
                    ,height: '200px'
                    ,autoplay:false
                });
            })
        })

        form.on('submit(clearFilterHotel)',function(data){
            $('input[name=keywords]').val('')
            $('input[name=checkIn]').val('')
            $('input[name=checkOut]').val('')
            $('input[name=roomAndPerson]').val('')
            $('input[type=checkbox]').removeAttr('checked');

            $('input[name=ratingMin]').val('0')
            $('input[name=ratingMax]').val('5')
            $('input[name=ratingGuestMin]').val('0')
            $('input[name=ratingGuestMax]').val('5')

            renderSlider('starsLevel',0,5,'ratingMin','ratingMax');
            renderSlider('commentScore',0,5,'ratingGuestMin','ratingGuestMax')
            $('select[name=sortBy]').val('');
            form.render('select');
            // $("#filterHotelForm")[0].reset();
            // layui.form.render();
            return false;
        })

        form.on('submit(filterHotel)',function(data){
            var filterHotel = getFilterHotelObj();
            if(!filterHotel){return false;}
            var index = layer.load(2);
            layui.data('localData',{
                key:'filterHotel',
                value:filterHotel
            });
            console.log(filterHotel)
            redirectHotelsByFilterHotel(filterHotel);
            return false;
        })

        function redirectHotelsByFilterHotel(filterHotel)
        {
            //获取链接参数
            var jsonData = $("#filterHotelForm").serialize();
            window.location.href='/admin/hotel/searchTripMakeHotel?'+ jsonData;

            // var occupancy = [];
            // $.each(filterHotel.roomInfo.rooms,function (i,v) {
            //     var occupancy_value = v.adult
            //     if(v.childAges.length > 0){
            //         var childAges = v.childAges.join(',');
            //         occupancy_value += '-' + childAges;
            //     }
            //     occupancy.push(occupancy_value);
            // })
            // filterHotel.occupancy = occupancy;



            // var loading = layer.load(2);
            // $.post("{:url('admin/hotel/getHotelsByFilterHotel')}",filterHotel,function (res) {
            //     layer.close(loading);
            //     if(res.code > 0){
            //
            //     }
            // },'json')
        }

        form.on('checkbox(allStarLevel)',function (value,data) {
            if($(this).next().hasClass('layui-form-checked')){
                $("#starLevelCheckBox input[type=checkbox]").prop('checked','checked');
            }else{
                $("#starLevelCheckBox input[type=checkbox]").prop('checked','');
            }
            form.render('checkbox');
        })

        $('#selectRoomAndPerson').click(function (data) {
            //弹出选择框
            showSelectRoomAndPersonTemplate();
        })

        var roomInfo = {$params.occupancy_json};
        $('input[name=roomAndPerson]').val(roomInfo.roomCount+'人间，'+roomInfo.totalPerson+'个人');
        if($('input[name=occupancy]').val()=='' || $('input[name=occupancy]').val()==undefined){
            $('input[name=occupancy]').val("1")
        }
        // var roomInfo = {};
        function showSelectRoomAndPersonTemplate() {
            // var template = $("#selectRoomAndPersonTemplate").html()
            var template = getSelectRoomAndPersonTemplateHtml();
            layer.open({
                type:1,
                title:'选择房间和人数',
                content:'<div id="selectRoomAndPersonBox">'+template+'</div>',
                area:['50%','80%'],
                btn: ['确认', '取消'],
                shadeClose:true,
                success:function(res){
                    //根据数据还原界面
                    $.each(roomInfo.rooms,function (i,v) {
                        var html = getOneRoomHtml(i+1,v)
                        $('#selectRoomAndPersonBox .roomList').append(html);
                    })
                    //渲染完成触发事件
                    form.render();

                },
                yes:function (res) {
                    //判断信息是否完成并统计信息
                    //初始化数据
                    roomInfo = {roomCount:0,totalPerson:0,rooms:[]};
                    var occupancy = [];
                    $("#selectRoomAndPersonBox .roomList").children().each(function (i,v) {
                        var adult = parseInt($(v).find('.person .caculateNumNum').text());
                        var child = parseInt($(v).find('.children .caculateNumNum').text());
                        var childAges = [];
                        $(v).find('select[name=ages]').each(function (ii,vv) {
                            childAges.push($(vv).val());
                        })
                        if(childAges.length > 0){
                            occupancy.push(adult + '-' + childAges.join(','))
                        }else{
                            occupancy.push(adult)
                        }
                        var room = {adult,child,childAges};
                        roomInfo.roomCount ++ ;
                        roomInfo.totalPerson += adult + child;
                        roomInfo.rooms.push(room);
                    })
                    var inputVal = roomInfo.roomCount+'间房，'+roomInfo.totalPerson+'个人';
                    $('#selectRoomAndPerson').val(inputVal)

                    $('input[name=occupancy]').val(occupancy.join('|'))
                    console.log(roomInfo);
                    //确认按钮触发事件
                    layer.closeAll('page'); //关闭所有页面层
                },

            })
        }

        function getChildAgesParentHtml(childAges=[]) {
            var childrenAgeSelect = '';
            $.each(childAges,function (i,v) {
                childrenAgeSelect += getChildAgesHtml(v)
            })
            return '<div class="layui-row padding6 children">\n' +
                '                <div class="layui-col-md6 personName">儿童年龄</div>\n' +
                '                <div class="layui-col-md6 childrenAgeSelect">\n' + childrenAgeSelect +
                '                </div>\n' +
                '            </div>';
        }

        function getChildAgesHtml(selectAge='') {
            var MaxAge = 18;
            var option = '';
            for(var i=1;i< MaxAge;i++){
                var selected = '';
                if(i==selectAge){selected='selected'}
                option += '<option value="'+ i +'" '+selected+'>' + i + '</option>';
            }

            return '<div class="layui-inline"><select name="ages" id="" class="layui-select">' + option + '</select></div>';
        }

        function getOneRoomHtml(roomNo,roomInfo){
            if(roomInfo.length < 1){roomInfo = {adult:1,child:0,childAges:[]}}
            var html = getSelectRoomAndPersonTemplateRoomHtml(roomNo,roomInfo);
            return html;
        }

        $(document).on('click','.addNewRoom',function () {
            var roomCount = $('#selectRoomAndPersonBox .roomList').children().length;
            var html = getOneRoomHtml(roomCount + 1,{})
            $('#selectRoomAndPersonBox .roomList').append(html);

        })

        $(document).on('click','.delOldRoom',function () {
            if($('#selectRoomAndPersonBox .roomList').children().length <=1){layer.msg('请至少保留一间房！');return false;}
            $('#selectRoomAndPersonBox .roomList').children().last().remove();
        })

        $(document).on('click','.caculateNumDec',function () {
            var number = $(this).next().text();
            var isChildNode = $(this).parent().parent().hasClass('children');
            var number = parseInt(number) - 1;
            if(number <= 0 && !isChildNode){layer.msg('人数至少为1');return false;
            }else if(number < 0 && isChildNode){layer.msg('人数不能小于0');return false;}
            $(this).next().text(number);
            var childrenAgeSelect = $(this).parent().parent().next().find('.childrenAgeSelect');
            if(childrenAgeSelect.children().length == 1){
                $(this).parent().parent().next().remove();
            }else{
                childrenAgeSelect.children().last().remove();
            }
            form.render();
        })

        $(document).on('click','.caculateNumInc',function () {
            var number = $(this).prev().text();
            var isChildNode = $(this).parent().parent().hasClass('children');
            var number = parseInt(number) + 1;
            if(number > 8 && !isChildNode){layer.msg('每间房不能超过8人');return false;
            }else if(number > 4 && isChildNode){layer.msg('儿童人数不能超过4');return false;}
            $(this).prev().text(number);
            //渲染选择儿童年龄的select
            if($(this).parent().parent().next().length < 1){
                //创建儿童年龄选择框
                var childrenAgeSelect = getChildAgesParentHtml(['1'])
                $(this).parent().parent().parent().append(childrenAgeSelect)
            }else{
                var childrenAgeSelect = getChildAgesHtml('1');
                $(this).parent().parent().next().find('.childrenAgeSelect').append(childrenAgeSelect);
            }
            form.render();
        })

        function getSelectRoomAndPersonTemplateHtml() {
            return '<div class="layui-form roomAndPersonShade">\n' +
                '    <div class="row roomList">\n' +
                '    </div>\n' +
                '    <div class="row">\n' +
                '        <div class="layui-cll-md12">\n' +
                '            <a class="layui-btn layui-btn-normal addNewRoom" style="">添加房间</a>\n' +
                '            <a class="layui-btn layui-btn-danger delOldRoom" style="">删除房间</a>\n' +
                '        </div>\n' +
                '    </div>\n' +
                '\n' +
                '</div>';
        }

        function getSelectRoomAndPersonTemplateAdultHtml(number)
        {
            return getSelectRoomAndPersonTemplateItemHtml('成人','18岁及以上',number,'person')
        }

        function getSelectRoomAndPersonTemplateChildHtml(number)
        {
            return getSelectRoomAndPersonTemplateItemHtml('儿童','0-17岁',number,'children',)
        }

        function getSelectRoomAndPersonTemplateChildAgesHtml(childAges)
        {
            if(childAges.length < 1){
                return ''
            }else{
                return getChildAgesParentHtml(childAges);

            }
        }

        function getSelectRoomAndPersonTemplateItemHtml(title,ageDesc,number,className)
        {
            return '<div class="layui-row padding6 '+className+'">\n' +
                '                <div class="layui-col-md6 personName">'+title+'<br><span class="personAge">'+ageDesc+'</span></div>\n' +
                '                <div class="layui-col-md6 caculateNum">\n' +
                '                    <a class="layui-inline caculateNumDec">－</a>\n' +
                '                    <div class="layui-inline caculateNumNum">'+number+'</div>\n' +
                '                    <a class="layui-inline caculateNumInc">＋</a>\n' +
                '                </div>\n' +
                '            </div>';
        }

        //获取房间号
        function getSelectRoomAndPersonTemplateRoomNoHtml(roomNo){
            return '<div class="layui-row padding6">\n' +
                '                <div class="layui-col-md6 roomTitle">房间<span class="roomNo">'+roomNo+'</span>\n' +
                '                </div>\n' +
                '            </div>';
        }

        function getSelectRoomAndPersonTemplateRoomHtml(roomNo,roomInfo) {
            return '<div class="layui-col-md12 marginBtm20" >'
                + getSelectRoomAndPersonTemplateRoomNoHtml(roomNo)
                + getSelectRoomAndPersonTemplateAdultHtml(roomInfo.adult || 1)
                + getSelectRoomAndPersonTemplateChildHtml(roomInfo.child || 0)
                + getSelectRoomAndPersonTemplateChildAgesHtml(roomInfo.childAges || [])
            '</div>';
        }

        function getFilterHotelObj() {
            var filterHotelForm = $("#filterHotelForm").serialize();
            filterHotelForm = filterHotelForm.split('&');
            var filterHotel = {};
            $.each(filterHotelForm,function (i,v) {
                var value = v.split('=');
                filterHotel[value[0]] = value[1]
            })
            if(filterHotel.checkIn==''){layer.msg('请选择入住时间！');return false;}
            if(filterHotel.checkOut==''){layer.msg('请选择退房时间！');return false;}
            if(roomInfo.length < 1){layer.msg('请选择入住房间和人数！');return false;}

            filterHotel.roomInfo = roomInfo;
            filterHotel.showTitle = roomInfo.roomCount + '间房，' + roomInfo.totalPerson + '个人';
            console.log(filterHotel);
            return filterHotel;
        }

        $(document).on('click','.goToDetails',function (data) {
            var hid = $(this).attr('data-id');
            var formData = $("#filterHotelForm").serialize();
            layer.load(2);
            window.location.href= "{:url('admin/hotel/tripMakeHotelInfo')}?hid=" + hid + "&" + formData;
        })

        //绑定延迟输入
        var timeoutID = 0;
        $(document).on('input focus','input[name=keywords]',function (data) {
            clearTimeout(timeoutID);
            var keywrods = $(this).val();
            if(keywrods==''){return false;}
            timeoutID = setTimeout(function () {
                getFilterCityOrHotel(keywrods);
            },200)
        })
        //ajax请求数据
        function getFilterCityOrHotel(keywords) {
            $.post('/api/expedia_api/filterCityOrHotelByKeywords',{keywords},function (res) {
                var html ='';
                $('#addressbox').children().remove();
                if(res.data.length > 0){
                    $.each(res.data,function (i,v) {
                        var subType = '';
                        if(v.subType=='point_of_interest'){subType='【景点】'}
                        else if(v.subType=='city'){subType='【城市】'}
                        else if(v.subType=='train_station'){subType='【火车站】'}
                        else if(v.subType=='metro_station'){subType='【地铁站】'}
                        else if(v.subType!=undefined){subType='【其他】'}
                        html += '<div class="address_name" data-name="' + v.name + '" ' +
                            'data-id="' + v.eId + '">' + subType + v.name + '</div>';
                    })
                    $('#addressbox').append(html);
                }
            },'json')
        }

        //选中addressBox 设置
        $(document).on("click",".address_name",function(){
            var address = $(this).attr('data-name');
            var regionId = $(this).attr('data-id');
            //查找当前需要赋值的input
            $('input[name=keywords]').val(address)
            $('input[name=regionId]').val(regionId)
            //删除addressbox
            resetAddressBox();
        });
        //取消addressBox弹框
        $(document).on("click",'*:not(.address_name)',function(event){
            resetAddressBox();
        })
        //重置addressBox
        function resetAddressBox()
        {
            $("#addressbox").children().remove();
        }

        $('.seeMoreFilter').click(function(){
            var rotate = parseInt($(this).attr('data-rotate'));
            rotate = rotate==180 ? 0 : 180;
            if(rotate==180){
                $(this).parent().removeAttr('style');
            }else{
                $(this).parent().css('max-height','50px');
                $(this).parent().css('overflow','hidden');
            }
            $(this).attr('data-rotate',rotate);
            $(this).find('.seeMoreFilterIcon').css('-webkit-transform','rotate('+rotate+'deg)');

        })
    })
</script>
